<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
  <meta charset="utf-8">

  <link rel="import" href="chrome://resources/html/polymer.html">
  <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
  <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
  <link rel="import" href="chrome://resources/cr_elements/icons.html">
  <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
  <link rel="import" href="chrome://resources/html/load_time_data.html">
  <link rel="import" href="chrome://resources/html/i18n_behavior.html">
  <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
  <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">

  <script src="urgent_password_expiry_notification.js"></script>
  <script src="strings.js"></script>

  <dom-module id="urgent-password-expiry-notification">
    <template>
      <style>
        ::part(dialog) {
          /* The HTML dialog should fill the entire system dialog. */
          height: 100%;
          width: 100%;
        }

        [slot='title'] {
          color: var(--google-grey-900);
          font-family: Google Sans, sans-serif;
          font-size: 28px;
          padding: 64px 64px 8px;
        }

        #title-icon {
          --iron-icon-fill-color: var(--google-grey-900);
          height: 32px;
          padding-bottom: 24px;
          width: 32px;
        }

        [slot='body'] {
          color: var(--google-grey-900);
          font-family: Roboto, sans-serif;
          font-size: 13px;
          padding: 0 64px;
        }

        [slot='button-container'] {
          bottom: 0;
          box-sizing: border-box;
          margin: 0;
          padding: 32px;
          position: fixed;
          width: 100%;
        }
      </style>

      <cr-dialog id="dialog" exportparts="dialog">
        <div slot="title">
          <div><iron-icon id="title-icon" icon="cr:domain"></iron-icon></div>
          <div>[[title_]]</div>
        </div>

        <div slot="body">[[i18n('body')]]</div>

        <div slot="button-container">
          <cr-button class="action-button" on-click="onButtonTap_">
            [[i18n('button')]]
          </cr-button>
        </div>
      </cr-dialog>
    </template>
  </dom-module>
</head>

<body>
  <urgent-password-expiry-notification id="main-element">
  </urgent-password-expiry-notification>
</body>
</html>
